<template>
	<view class="evalute">
		<navbar title='评价' background="linear-gradient(180deg, rgba(68, 212, 168, 0.3) 0%, rgba(68, 212, 168, 0) 100%)">
		</navbar>
		<view class="evContent" :style="{top: isH5 ? '120px' : `${ 100 + statusBarHeight}px`}">
			<view class="ev1">
				<view class="ev1Left">
					<image src="/static/images/nav-tag-1.png" mode=""></image>
				</view>
				<view class="ev1Right">
					<text class="fontWeight">全身理疗按摩</text>
					<text>上门时间：2025-03-06 09:00</text>
					<text>项目时间：60分钟</text>
					<text>项目价格：￥248.00</text>
				</view>
			</view>
			<view class="ev2">
				<view class="strat">
					<text class="fontWeight">商品评价</text>
					<u-rate :count="count" v-model="rateValue" size='24' inactiveColor='#FFEEDE'
						activeColor="rgba(255, 140, 64, 1)"></u-rate>
				</view>
				<view class="feel">
					<text>首先说一下进店感受，前台人员很有礼貌，进来就有迎宾语，也面带微笑。全程的很耐心的指导我们学习，总之很愉快的一次体验。</text>
				</view>
				<view class="appraise">
					<view :class="item.isChoose?'appItem':'noAppItem'" v-for="(item,index) in evaluateList"
						:key="index">
						<text>{{item.lable}}</text>
					</view>
				</view>
				<view class="phoneCon">
					<image src="/static/images/nav-tag-1.png" mode="" class="picture"></image>
					<view class="pBtn">
						<image src="/static/images/xj.png" mode=""></image>
						<text>添加图片/视频</text>
					</view>
				</view>
			</view>
		</view>
		<view class="commonBtn">
			<view class="btnCon" @tap="submit">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navMixin from "@/mixin/navMixin.js"
	export default {
		mixins: [navMixin],
		data() {
			return {
				rateValue: 4,
				count: 5,
				evaluateList: [{
						lable: '服务优异',
						isChoose: true
					},
					{
						lable: '手法娴熟',
						isChoose: true
					},
					{
						lable: '很舒服',
						isChoose: false
					},
					{
						lable: '效果很好',
						isChoose: false
					},
					{
						lable: '体验愉快',
						isChoose: false
					}
				]
			}
		},
		methods: {
			submit() {
				this.goto('pages/order/evaluateComplete')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fontWeight {
		font-weight: bold;
	}

	/* #ifdef H5 */
	page {
		position: relative;
		height: 100%;
		background-color: $page-color-base2;
	}
	/* #endif */

	.evalute {
		position: relative;
		background-color: #F6F8FC;
		height: 100%;
	}

	.evContent {
		position: relative;
		padding: 0 32rpx;
		z-index: 99;

		.ev1 {
			display: flex;
			align-items: center;
			padding: 24rpx;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			margin-top: -100rpx;
			font-size: 28rpx;

			.ev1Left {
				image {
					width: 166rpx;
					height: 170rpx;
				}
			}

			.ev1Right {
				line-height: 45rpx;
				display: flex;
				flex-direction: column;
				font-size: 22rpx;
				margin-left: 16rpx;

				.c4Title {
					font-size: 28rpx;
				}
			}
		}

		.ev2 {
			display: flex;
			flex-direction: column;
			padding: 24rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			margin-top: 16rpx;

			.strat {
				display: flex;
				align-items: center;

				text {
					margin-right: 40rpx;
				}
			}

			.feel {
				display: flex;
				align-items: center;
				padding: 16rpx;
				font-size: 28rpx;
				line-height: 44rpx;
				color: rgba(94, 103, 110, 1);
				width: 98%;
				height: 192rpx;
				border-radius: 16rpx;
				background: rgba(246, 248, 252, 1);
				margin-top: 24rpx;
			}

			.appraise {
				display: flex;
				flex-wrap: wrap;

				.appItem {
					width: 128rpx;
					height: 52rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					border: 2rpx solid $theme-color;
					color: $theme-color;
					margin-right: 16rpx;
					margin-top: 16rpx;
				}

				.noAppItem {
					@extend .appItem;
					border: 2rpx solid rgba(152, 160, 166, 1);
					color: rgba(94, 103, 110, 1);
				}
			}

			.phoneCon {
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.picture {
					width: 196rpx;
					height: 196rpx;
					border-radius: 16rpx;
					margin-right: 24rpx;
				}

				.pBtn {
					width: 196rpx;
					height: 196rpx;
					border-radius: 16rpx;
					background: rgba(246, 248, 252, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);

					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 8rpx;
						margin-bottom: 16rpx;
					}
				}
			}
		}
	}
</style>